<!DOCTYPE html>
<html>
  <title>购物车案例</title>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="app">
      <div v-if="books.length">
        <table>
          <thead>
            <tr>
              <th></th>
              <th>书籍名称</th>
              <th>出版日期</th>
              <th>价格</th>
              <th>数量</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(book, idx) in books">
              <td>{{book.id}}</td>
              <td>{{book.name}}</td>
              <td>{{book.date}}</td>
              <td>{{book.price | finalPrice}}</td>
              <td>
                <button
                  @click="decrement(idx)"
                  v-bind:disabled="book.count <= 1"
                >
                  -
                </button>
                {{book.count}}
                <button @click="increment(idx)">+</button>
              </td>
              <td>
                <button @click="removeHandle(idx)">移除</button>
              </td>
            </tr>
          </tbody>
        </table>
        <h2>总价格：{{totalPrice | finalPrice}}</h2>
      </div>
      <div v-else>
        <h2>购物车为空!</h2>
      </div>
    </div>

    <script src="../../js/vue.js"></script>
    <script src="main.js"></script>
  </body>
</html>
